<template>
  <div class="category-page">
    <!-- 页面头部 -->
    <div class="page-hero">
      <div class="hero-content">
        <h1 class="hero-title">探索校园</h1>
        <p class="hero-subtitle">发现不同领域的精彩内容，找到属于你的兴趣圈子</p>
        <div class="hero-stats">
          <div class="stat-item">
            <span class="stat-number">{{ totalPosts }}</span>
            <span class="stat-label">篇帖子</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ totalCategories }}</span>
            <span class="stat-label">个分类</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ activeUsers }}</span>
            <span class="stat-label">活跃用户</span>
          </div>
        </div>
      </div>
      <div class="hero-decoration">
        <div class="floating-card card-1"></div>
        <div class="floating-card card-2"></div>
        <div class="floating-card card-3"></div>
      </div>
    </div>

    <!-- 分类网格 -->
    <div class="categories-section">
      <div class="section-header">
        <h2>热门分类</h2>
        <p>选择你感兴趣的话题开始探索</p>
      </div>
      
      <div class="category-grid">
        <div
          v-for="(category, index) in categories"
          :key="category.id"
          class="category-card"
          :class="`category-${index + 1}`"
          @click="goToCategory(category.id)"
        >
          <div class="category-background">
            <div class="bg-pattern"></div>
          </div>
          
          <div class="category-content">
            <div class="category-header">
              <div class="category-icon" :class="`icon-${category.icon}`">
                <el-icon size="28"><component :is="category.icon" /></el-icon>
              </div>
              <div class="category-badge">
                <span>{{ category.postCount }}</span>
              </div>
            </div>
            
            <div class="category-info">
              <h3 class="category-title">{{ category.name }}</h3>
              <p class="category-desc">{{ category.description }}</p>
            </div>
            
            <div class="category-footer">
              <div class="category-trending">
                <el-icon size="14"><TrendCharts /></el-icon>
                <span>本周新增 {{ category.weeklyPosts || Math.floor(Math.random() * 20) + 1 }} 篇</span>
              </div>
              <div class="category-arrow">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速导航 -->
    <div class="quick-nav-section">
      <div class="section-header">
        <h2>快速导航</h2>
      </div>
      
      <div class="quick-nav-grid">
        <div class="nav-item" @click="$router.push('/post/create')">
          <div class="nav-icon create">
            <el-icon><EditPen /></el-icon>
          </div>
          <span>发布帖子</span>
        </div>
        
        <div class="nav-item" @click="$router.push('/lost-found')">
          <div class="nav-icon lost">
            <el-icon><Search /></el-icon>
          </div>
          <span>失物招领</span>
        </div>
        
        <div class="nav-item" @click="$router.push('/home?sort=latest')">
          <div class="nav-icon latest">
            <el-icon><Clock /></el-icon>
          </div>
          <span>最新动态</span>
        </div>
        
        <div class="nav-item" @click="$router.push('/home?sort=hot')">
          <div class="nav-icon hot">
            <el-icon><Star /></el-icon>
          </div>
          <span>热门推荐</span>
        </div>
      </div>
    </div>
    
    <!-- 发布帖子按钮 -->
    <PostFab />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import PostFab from '@/components/PostFab.vue'

const router = useRouter()

const categories = ref([
  {
    id: 1,
    name: '学习交流',
    description: '分享学习心得，互相答疑解惑',
    icon: 'Reading',
    postCount: 156,
    weeklyPosts: 12
  },
  {
    id: 2,
    name: '生活分享',
    description: '记录美好校园时光',
    icon: 'Camera',
    postCount: 203,
    weeklyPosts: 18
  },
  {
    id: 3,
    name: '求助提问',
    description: '遇到困难？大家来帮你',
    icon: 'QuestionFilled',
    postCount: 89,
    weeklyPosts: 7
  },
  {
    id: 4,
    name: '社团活动',
    description: '精彩活动不容错过',
    icon: 'Star',
    postCount: 124,
    weeklyPosts: 15
  },
  {
    id: 5,
    name: '二手交易',
    description: '闲置物品找新主人',
    icon: 'ShoppingBag',
    postCount: 95,
    weeklyPosts: 9
  }
])

// 统计数据
const totalPosts = computed(() => categories.value.reduce((sum, cat) => sum + cat.postCount, 0))
const totalCategories = computed(() => categories.value.length)
const activeUsers = ref(1247)

const goToCategory = (categoryId) => {
  router.push(`/home?category=${categoryId}`)
}
</script>

<style scoped>
.category-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 25%, #2d1b69 50%, #667eea 100%);
  position: relative;
  overflow-x: hidden;
}

.category-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* 页面头部 */
.page-hero {
  position: relative;
  background: transparent;
  color: white;
  padding: 120px 20px 100px;
  text-align: center;
  overflow: hidden;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 25%, #c7d2fe 50%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.hero-subtitle {
  font-size: 22px;
  opacity: 0.85;
  margin-bottom: 50px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
  color: #e2e8f0;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #818cf8, transparent);
}

.stat-number {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ffffff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 16px;
  opacity: 0.8;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #cbd5e1;
}

/* 浮动装饰 */
.hero-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.floating-card {
  position: absolute;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: float 8s ease-in-out infinite;
}

.card-1 {
  width: 120px;
  height: 120px;
  top: 15%;
  left: 8%;
  animation-delay: 0s;
}

.card-2 {
  width: 80px;
  height: 80px;
  top: 60%;
  right: 12%;
  animation-delay: 3s;
}

.card-3 {
  width: 100px;
  height: 100px;
  bottom: 25%;
  left: 15%;
  animation-delay: 6s;
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg) scale(1); 
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-30px) rotate(10deg) scale(1.1); 
    opacity: 0.8;
  }
}

/* 分类部分 */
.categories-section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 12px;
  font-weight: 600;
}

.section-header p {
  font-size: 16px;
  color: #7f8c8d;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.category-card {
  position: relative;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.category-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.category-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  overflow: hidden;
}

.bg-pattern {
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

.category-1 .category-background { background: linear-gradient(135deg, #667eea, #764ba2); }
.category-2 .category-background { background: linear-gradient(135deg, #f093fb, #f5576c); }
.category-3 .category-background { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.category-4 .category-background { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.category-5 .category-background { background: linear-gradient(135deg, #fa709a, #fee140); }

.category-content {
  position: relative;
  padding: 30px;
  z-index: 2;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.category-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.category-badge {
  background: rgba(255, 255, 255, 0.9);
  color: #2c3e50;
  padding: 8px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
}

.category-info {
  margin-bottom: 24px;
}

.category-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.category-desc {
  color: #7f8c8d;
  line-height: 1.6;
  font-size: 14px;
}

.category-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-trending {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #95a5a6;
  font-size: 12px;
}

.category-arrow {
  color: #bdc3c7;
  transition: transform 0.3s;
}

.category-card:hover .category-arrow {
  transform: translateX(4px);
}

/* 快速导航 */
.quick-nav-section {
  padding: 60px 20px 80px;
  max-width: 800px;
  margin: 0 auto;
}

.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.nav-item {
  background: white;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.nav-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.nav-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.nav-icon.create { background: linear-gradient(135deg, #667eea, #764ba2); }
.nav-icon.lost { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.nav-icon.latest { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.nav-icon.hot { background: linear-gradient(135deg, #fa709a, #fee140); }

.nav-item span {
  color: #2c3e50;
  font-weight: 500;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .hero-stats {
    gap: 20px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .categories-section {
    padding: 60px 15px;
  }
  
  .category-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .section-header h2 {
    font-size: 28px;
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 60px 15px;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 16px;
  }
  
  .category-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-nav-grid {
    grid-template-columns: 1fr;
  }
}
</style>